import React from "react";
import SearchForm from "../searchForm";
import { Table, Tag, Button, Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import "./index.css";
// 表格
const columns = [
  {
    title: "规则编号",
    dataIndex: "no",
    key: "no",
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "description",
    key: "description",
    align: "center",
  },
  // {
  //   title: "头像",
  //   dataIndex: "avatar",
  //   key: "avatar",
  //   align: "center",
  //   render: (avatar) => <Avatar size={32} src={avatar} />,
  // },
  {
    title: "调用次数",
    dataIndex: "callNo",
    key: "index",
    align: "center",
    sorter: (a, b) => a.callNo - b.callNo,
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "index",
    align: "center",
    render: (status) => {
      if (status === 0) {
        return <Tag color="#f50">异常</Tag>;
      } else if (status === 1) {
        return <Tag color="#2db7f5">运行中</Tag>;
      } else if (status === 2) {
        return <Tag color="#87d068">已上线</Tag>;
      } else if (status === 3) {
        return <Tag color="#108ee9">测试中</Tag>;
      }
    },
  },

  {
    title: "更新时间",
    dataIndex: "updatedAt",
    key: "updatedAt",
    align: "center",
    sorter: (a, b) => a.callNo - b.callNo,
  },
  {
    title: "操作",
    dataIndex: "key",
    key: "key",
    align: "center",
    render: (key) => {
      return (
        <span>
          <a style={{ marginRight: 16 }}>配置 </a>
          <a>订阅警报</a>
        </span>
      );
    },
  },
];
class Index extends React.Component {
  state = {
    tableData: [],
    visible: false,
  };
  componentDidMount() {
    this.getTableData();
  }
  // 表格数据，axios请求
  getTableData = () => {
    let tableListDataSource = [];
    for (let i = 0; i < 46; i += 1) {
      tableListDataSource.push({
        key: i,
        disabled: i % 6 === 0,
        href: "https://ant.design",
        avatar: [
          "https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfB pg.png",
          "https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLX ik.png",
        ][i % 2],
        no: `TradeCode ${i}`,
        title: `⼀个任务名称 ${i}`,
        owner: "曲丽丽",
        description: "这是⼀段描述",
        callNo: Math.floor(Math.random() * 1000),
        status: Math.floor(Math.random() * 10) % 4,
        updatedAt: this.timeFormat(
          new Date(`2017-07-${Math.floor(i / 2) + 1}`)
        ),
        createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
        progress: Math.ceil(Math.random() * 100),
      });
    }
    this.setState({
      tableData: tableListDataSource,
    });
  };
  // 点击显示modal
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  // 时间格式化
  timeFormat = (e) => {
    var d = new Date(e);
    var datetime =
      d.getFullYear() +
      "-" +
      (d.getMonth() + 1) +
      "-" +
      d.getDate() +
      " " +
      d.getHours() +
      ":" +
      d.getMinutes() +
      ":" +
      d.getSeconds();
    return datetime;
  };
  render() {
    const rowSelection = {};
    return (
      <div className="content">
        <SearchForm />
        <Button
          style={{ marginTop: 20, marginBottom: 20 }}
          icon={<SearchOutlined />}
          type="primary"
          onClick={this.showModal}
        >
          新增
        </Button>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={this.state.tableData}
        />
        <Modal
          title="新建规则"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

export default Index;
